<template>
	<view class="w_100">
	
		<view class="w_100 j_c_c d_f " style="margin-top: 0rpx;">
			<view class="d_f j_c_c class_" style="width: 90%;">
				<view  style="width: 96%;" class="">
					<view style="width:100%;"class="d_f j_c_c">
						<view class="d_f j_c_s_b" style="width: 80%;">
							<text class="txt" @tap="cutFun(1)" :class="count==1?'txt_1':''">验证码登录</text>
							<text class="txt" @tap="cutFun(2)" :class="count==2?'txt_1':''">密码登录</text>
						</view>
					</view>
					<view class="" style="margin-top:80rpx;">
						<view class="p_r" style="height: 86rpx;margin-top:80rpx;">
							<input type="text" v-model="phone" class="inp_2" :placeholder="accout" placeholder-class="in_pla"/>
							<view class="" @tap.stop="clearFun">
								<uni-icons type="clear"  style="top:24rpx;right:30rpx;color:#888888" class="p_a"></uni-icons>
							</view>
						</view>
						<view class="p_r" style="height: 86rpx;margin-top:80rpx;" >
							<input type="password" v-model="password" class="inp_1" :placeholder="pass" placeholder-class="in_pla"/>
							<text class="code p_a" style="top:24rpx;right:10rpx" @tap.stop="forgetPass">{{code}}</text>
						</view>
						
					</view>
					<view class="d_f j_c_c w_100" style="margin-top: 100rpx;" @tap.stop="logoFun">
						<view class=" box">登录</view>
					</view>
					<view class="d_f j_c_c w_100" style="margin-top:60rpx;">
						<text style="color:#6899F7;font-size: 28rpx;" @tap="regist">注册</text>
					</view>
				</view>
			</view>
		</view>
		<!-- footer -->
		<view class="d_f j_c_c w_100" style="margin-top:8%;">
			<view class="d_f j_c_s_b a_i_c" style="width: 60%;">
				
					<image :src="item.img" 
					@tap="multimodeFun(index)"
					v-for="(item,index) in multimodeLoin"
					 style="width: 72rpx;height: 72rpx;"></image>	
				
			</view>		
		</view>
		<view class="p_a" style="bottom: 40rpx;left: 50%;width: 400rpx;margin-left: -200rpx;">
			<view class="d_f j_c_c w_100" style="font-size: 24rpx;color:#A6A6A6;">
				<text>登录即代表您已同意</text><text style="color:#6899F7;" @tap="user">《用户协议》</text>                
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				count:1,
				accout:"请输入手机号",
				pass:"请输入手机验证码",
				code:"获取验证码",
				phone:"",
				password:"",
				codeTime:true,
				multimodeLoin:[
					{'img':'../../static/share/icon_weixin.png'},
					{'img':'../../static/share/icon_qq.png'},
					{'img':'../../static/share/icon_weibo.png'},	
				]
			}
		},
		onShow() {
			this.phone="";
			this.password = "";
		},
		methods: {
			cutFun(val){
				this.codeTime=val==1?true:false;
				this.count = val;
				this.accout="请输入手机号";
				this.pass=val==1?"请输入手机验证码":'请输入6-18位数字字母';
				this.code=val==1?"获取验证码":"忘记密码";
				this.phone="";
				this.password = "";
				
				
			},
			regist(){
				uni.navigateTo({
					url:"/pages/logo-register/register"
				})
			},
			clearFun(){
				this.phone = "";
			},
			// 获取验证码 或者忘记密码
			forgetPass(){
				if(this.count==1){	
					if(!this.phone)return this.$funs.show("请输入手机号",0)
					if(this.code!="获取验证码")return this.$funs.show("请勿频繁操作",0)
					let data={
						phoneNumber:this.phone,		
					}
					this.$api.phoneCode(data).then(res=>{
						console.log(res)
							this.code = 60;
							let i =setInterval(()=>{
								if(!this.codeTime){
									clearInterval(i)
									this.code="忘记密码";
									return 
								}
								if(this.code==0){
									this.code="获取验证码";
									clearInterval(i)
									return 
								} 
								this.code =this.code-1
								console.log(this.code)
							},1000)
						
					})
				}else{
					uni.navigateTo({
						url:"/pages/logo-register/forgetPass"
					})
				}
				
			},
			user(){
				uni.navigateTo({
					url:"/pages/logo-register/userAgreement"
				})
			},
			// 多方式登录
			multimodeFun(index){
				let that = this;
				let loginMultimode = '';
				if(index==0)loginMultimode = 'weixin';
				if(index==1)loginMultimode = 'qq';
				if(index==2)loginMultimode = 'sinaweibo';
				uni.getProvider({
					service:'oauth',
					success:function(res){
						console.log(res.provider)
						 if (~res.provider.indexOf(loginMultimode)) {
						            uni.login({
						                provider: loginMultimode,
						                success: function (loginRes) {
											console.log(loginRes.errMsg)
											if(loginRes.errMsg =="login:ok"){
												that.$funs.show("登录成功",1)
											}
						                   
						                }
						            });
						        }
					}
				})
				
			},
			// 账户登录
			logoFun(){
				if(!this.phone)return this.$funs.show("请输入手机号",0)
				if(!(/^1[3456789]\d{9}$/.test(this.phone)))return this.$funs.show("请输入正确的手机号",0)
				let data = {
					phoneNumber:this.phone,
					captcha:this.password,
				}
				this.$api.login(data).then(res=>{
					console.log(res)
				})
				// if(this.count == 1){
				// 	if(!this.password)return this.$funs.show("请输入验证码",0)
					
				// 	let data={
				// 		url:"/app/login/applogin",
				// 		u:1,
				// 		t:1,
				// 		data:{
				// 			phoneNumber:this.phone,
				// 			captcha:this.password,
				// 		}
				// 	}	
				// 	this.$api(data).then(res=>{
				// 		console.log(res)
				// 		if(res.data.code==200){
				// 		uni.setStorageSync('token', res.data.result.sysUser.token)
				// 		uni.setStorageSync('userId', res.data.result.sysUser.id)
				// 		uni.setStorageSync('userInfo', res.data.result.sysUser)
				// 			this.$funs.show(res.data.message,1)
				// 			setTimeout(()=>{
				// 				uni.switchTab({
				// 				    url: '/pages/bottom-tab/home'
				// 				});
				// 				// uni.navigateBack({
				// 				// 	delta:1
				// 				// })
				// 			},3000)
				// 			return
				// 		}
				// 		this.$funs.show(res.data.message,0)
				// 	})	
				// }else{
				// 	if(!this.password)return this.$funs.show("请输入密码",0)
				// 	if(!(/^[0-9A-Za-z][0-9A-Za-z]{5,18}$/.test(this.password)))return this.$funs.show("密码格式不正确",0)
				// 	let data={
				// 		url:"/app/login/applogin",
				// 		data:{
				// 			phoneNumber:this.phone,
				// 			password:this.password,
				// 		}
				// 	}
				// 	this.$api(data).then(res=>{
				// 		console.log(res)
						
				// 		if(res.data.code===200){
							
				// 			uni.setStorageSync('token', res.data.result.sysUser.token)
				// 			uni.setStorageSync('userId', res.data.result.sysUser.id)
				// 			uni.setStorageSync('userInfo', res.data.result.sysUser)
							
				// 			this.$funs.show(res.data.message,1)
				// 			setTimeout(()=>{
				// 				uni.switchTab({
				// 				    url: '/pages/bottom-tab/home'
				// 				});
				// 			},3000)
				// 			return
				// 		}
				// 		this.$funs.show(res.data.message,0)
						
				// 	})
				// }
				
				
				
			}
		}
	}
</script>

<style>
.class_{
	border-radius: 80rpx;
	/* box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.2);	 */
	padding:100rpx 0 100rpx 0;
}
.txt{
	width: 50%;
	height: 80rpx;
	font-size: 42rpx;
	line-height: 80rpx;
	text-align: center;
	font-size: 36rpx;
}

.inp_1{
	width: 54%;
	padding:0 36% 0 10%;
	height: 86rpx;
	line-height: 86rpx;
	border-radius: 43rpx;
	background-color: #F8F8F8;
	margin-top: 80rpx;
}
.inp_2{
	width:70%;
	padding:0 20% 0 10%;
	height: 86rpx;
	line-height: 86rpx;
	border-radius: 43rpx;
	background-color: #F8F8F8;
}
.code{
	display: inline-block;
	width:36%;
	text-align: center;
	border-left: 1rpx solid #CECECF;
	font-size: 28rpx;
	color: #888888;
}
.box{
	width: 100%;
	height: 86rpx;
	font-size: 32rpx;
	line-height: 86rpx;
	text-align: center;
	color: #FFFFFF;
	background: linear-gradient(90deg, #6899F7, #68AFF7);
	border-radius: 43rpx;
}
.txts{
	width: 92rpx;
	height: 1rpx;
	border-top: 1rpx solid #D8D8D8;
}
.txt_1{
	color:#6899F7;
}
.in_pla{
	color:#B2B2B2;
	font-size: 28rpx;
}
</style>
